<template>
  <div class="xtx-goods-page">
    <!-- 加载中效果 -->
    <div v-if="loading" class="container">
      <div class="loading"></div>
    </div>

    <!-- 商品详情数据 -->
    <div class="container" v-else>
      <!-- v-if控制DOM渲染的时机 -->
      <template v-if="info.categories">
        <xtx-bread>
          <xtx-bread-item to="/">首页</xtx-bread-item>
          <xtx-bread-item
            :to="`/category/${info.categories[1].id}/${info.categories[1].name}`"
            >{{ info.categories[1].name }}</xtx-bread-item
          >
          <xtx-bread-item
            :to="`/category/${info.categories[1].id}/${info.categories[1].name}`"
            >{{ info.categories[0].name }}</xtx-bread-item
          >
          <xtx-bread-item>{{ info.name }}</xtx-bread-item>
        </xtx-bread>
      </template>

      <!-- 商品信息 -->
      <div class="goods-wrapper">
        <div class="media">
          <XtxImageView :images="info.mainPictures"></XtxImageView>
          <GoodsSales :goods="info" />
        </div>
        <div class="spec">
          <GoodsInfo :goods="info" />
          <!-- sku组件 -->
          <xtx-sku :goods="info" @change="changeSkuFn"></xtx-sku>
          <!-- 数量 -->
          <xtx-numbox :min="1" v-model="count" label="数量" @change="numChangeFn"/>
          <!-- 按钮 -->
          <XtxButton @click="buyFn" type="primary" style="margin-top: 20px; margin-left: 60px">
            加入购物车
          </XtxButton>
        </div>
      </div>
      <!-- 商品底部信息 -->
      <goods-footer :goods="info"></goods-footer>
    </div>
  </div>
</template>

<script>
import { getGoodsDetailAPI } from '@/api'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
import { ref } from '@vue/reactivity'
import GoodsInfo from './components/goodsInfo.vue'
import GoodsSales from './components/goodsSales.vue'
import GoodsFooter from './components/goodsFooter.vue'
import Message from 'erabbit-ui/packages/components/Message'
import { useStore } from 'vuex'
// 商品-详情页
export default {
  name: 'xtx-goods-page',
  components: {
    GoodsInfo,
    GoodsSales,
    GoodsFooter
  },
  setup () {
    const route = useRoute()
    const store = useStore()
    const loading = ref(true) // 控制数据没回来之前的动画效果
    const info = ref({ specs: {}, skus: {} }) // 商品信息对象
    const count = ref(0) // 购买数量

    // 获取-商品详情数据
    const getDetailFn = async (routeObj) => {
      const res = await getGoodsDetailAPI(routeObj.query.id)
      // console.log(res)
      info.value = res.result
      loading.value = false
    }
    getDetailFn(route)

    // sku规格切换传出sku对象
    const changeSkuFn = (obj) => {
      //   inventory: 2052 // 此规格对应库存量
      //     oldPrice: "429.00" // 原价
      //     price: "279.00" // 现价
      //     skuId: "1737483" // 库存量id(不同规格组合)
      //     specsText: "颜色：黑色敲花 尺码：35" // spu单位文字字符串
      //    }
      // console.log(obj)
      // 目标: 用户选择完不同的规格后, 把价格和规格id保存到info对象(而且同时还能影响商品上面信息价格展示)
      if (obj.skuId) {
        for (const key in obj) {
          info.value[key] = obj[key]
        }
        // 因为obj里库存属性叫inventory, 而vuex里getters那块要stock做剩余库存判断, 所以需要给对象增加stock属性才行(意思就是2个属性都留着)
        info.value.stock = obj.inventory
      } else {
        count.value = 0
        info.value.count = 0
        info.value.skuId = null
      }
    }
    onBeforeRouteUpdate((to, from, next) => {
      getDetailFn(to)
      next()
    })

    // 加入购物车->点击事件
    const buyFn = () => {
      // 判断规格
      if (!info.value.skuId) {
        Message({
          type: 'warn',
          text: '请选择规格'
        })
      } else if (!info.value.count) {
        Message({
          type: 'warn',
          text: '请选择数量'
        })
      } else {
        store.dispatch('cart/insertCartActions', { ...info.value, isEffective: true, selected: true })
      }
    }
    // 购买数量改变
    const numChangeFn = (num) => {
      info.value.count = num
    }

    return {
      info,
      loading,
      changeSkuFn,
      count,
      buyFn,
      numChangeFn
    }
  }
}
</script>

<style lang="less" scoped>
.loading {
  height: 600px;
  border-top: 72px solid #f5f5f5;
  background: #fff url(../../assets/load.gif) no-repeat center / 80px 80px;
}

.goods-wrapper {
  display: flex;
  background: #fff;
  padding: 40px;
  .media {
    width: 480px;
    margin-right: 40px;
  }
}
</style>
